<!DOCTYPE html>
<html lang="en">
<head>
<title>基于bootstrap的多表格编辑JS</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/fullcalendar.css" />
<link rel="stylesheet" href="css/matrix-style.css" />
<link rel="stylesheet" href="css/matrix-media.css" />
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="font-awesome/css/font-awesome.css"  />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
<script src="js/jquery-1.8.0.min.js"></script> 
 
<style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }

        .amap-icon img,
        .amap-marker-content img{
            width: 25px;
            height: 34px;
        }

        .marker {
            position: absolute;
            top: -20px;
            right: -118px;
            color: #fff;
            padding: 4px 10px;
            box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
            white-space: nowrap;
            font-size: 12px;
            font-family: "";
            background-color: #25A5F7;
            border-radius: 3px;
        }

        .input-card{
            width: 18rem;
            z-index: 170;
        }

        .input-card .btn{
            margin-right: .8rem;
        }

        .input-card .btn:last-child{
            margin-right: 0;
        }
 </style>
   
<style>
.parent1 {
 
	display: block;
	background: gray;
	height:0px;
    padding-bottom:100%
}

.parent1 {
	 writing-mode: horizontal-tb; 	
}

.child {
	margin: 10px 10px 10px 10px;
	border: 5px solid black;
	padding: 5px;
	width: 450px;
	height: 450px;
	text-align: center;
	background: lightblue;
	writing-mode: horizontal-tb;
	display: inline-block;
}

</style>
</head>
<body>
        

<div id="header"></div>


<div id="user-nav" class="navbar navbar-inverse">
  <ul class="nav">
    <li  class="dropdown" id="profile-messages" ><a title="" href="#" data-toggle="dropdown" data-target="#profile-messages" class="dropdown-toggle"><i class="icon icon-user"></i>  <span class="text">示例</span><b class="caret"></b></a>     
    </li>
  </ul>
</div>


<div id="sidebar"><a href="#" class="visible-phone"><i class="icon-home"></i>控制台</a>
  <ul>   
    <li class="active"> <a><i class="icon-signal"></i> <span>多表格编辑</span></a> </li>  
  </ul>
</div>

<div id="content">
<div id="content-header"></div>
<div>
    <div></div> 
    <div>    
    <button id="fbt1">追加</button>
	<button id="fbt2">删除</button>
	<button id="fbt8">ceshi</button>
	</div>     
	<!-- 与wwf分离，来保存input变量 -->    
    <div class="parent1 pre-scrollable"> 
    <!-- 在id为wwf的div中进行表格操作 -->    
    <div  id="wwf">    
	</div>    
	</div>   
</div>
</div>

<div class="row-fluid">
  <div id="footer" class="span12">Copyright &copy; 2018.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a> </div>
</div>

<script src="js/mindmup-editabletable.js"></script> <!-- 多表格编辑js -->  
<!-- <script src="js/mindmup-editabletable-rb.js"> </script> --> <!-- 原始edittable js  使用这个js动态添加的时候会生成多个 input-->  
<script type="text/javascript">
//js查找某字符在字符串中出现的次数哦。  
function getStrCount(scrstr,armstr) { 
    	     var count=0;
    	     while(scrstr.indexOf(armstr) != -1 ) {
    	        scrstr = scrstr.replace(armstr,"")
    	        count++;    
    	     }
    	     return count;
      }
//这个变量在js中赋值，保存当前表格td焦点。      
//这个变量在mindmup-editabletable.js中被赋值，表示当前焦点td。
var act;
//从1开始打开页面会自动加载一个表，表示车模块的数目。
var miantable;
   
//追加表
$('#fbt1').click(function(){
    	
    	 var temp1="bta";//临时变量。
    	 var temp2="btb";
    	 var temp3="tablea";
    	 var temp4="tableb";
    	 var temp7="del";
    	 miantable=miantable+1;
    	 var arr1=temp1+miantable;//生成动态添加元素的id
    	 var arr2=temp2+miantable;
    	 var arr3=temp3+miantable;
    	 var arr4=temp4+miantable;   	
    	 var arr7=temp7+miantable;
    	 
     var jsdt="<div class='child'>"    		
             +"<button id="+arr1+">追加列表项</button>"
	         +"<button id="+arr2+">删除列表项</button>"
	         +"<button id="+arr7+">删除表</button>"
             +"<table id="+arr4+" class='table'>"	   	     
             +"<thead><tr><th>字段1 </th><th>字段2</th><th>字段3</th><th>字段4</th><th>字段5</th></tr></thead>"
             +"<tbody>"
             +"<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>"
             +"</tbody>"
             +"<tfoot><tr><th><strong>合计</strong></th><th></th><th></th><th></th></tr></tfoot>"			
             +"</table>"
             +"</div>"      
 	   
 	         +"<script type='text/javascript'>"  
 		
 	         +"$('#"+arr4+"').editableTableWidget();"
 	 
	         +"$('#"+arr7+"').click(function(){"
	         +"$('#"+arr7+"').parent().remove();" 	
	         +"});"	 
	  
	         +"$('#"+arr1+"').click(function(){"
	         +"if($('#"+arr4+"').children('tbody').find('tr').size()<12){"	  
	         +"$('#"+arr4+"').children('tbody').append('<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>');"
	         +"$('#"+arr4+"').unbind();"
	         +"$('#"+arr4+"').editableTableWidget();"
	         +"}"	  
	         +"});"//这个 js代码必须动态添加到，html中,所有的双引号换成单引号。
	  
	         +"$('#"+arr2+"').click(function(){"
	         +"if($('#"+arr4+"').children('tbody').find('tr').size()!=1){"	  
	         +"$('#"+arr4+"').children('tbody').find('tr:last').remove();"  
	         +"}"
	         +"});"
 	 
 	         +"<\/script>";  
    	
    	 $('#wwf').find("div:last").after(jsdt);//找到最后一个div元素在它的后面插入新的div 插入新DVI 就要更新input 失去焦点事件
}); 
//删除表
$('#fbt2').click(function(){
		 var count = getStrCount($('#wwf').html(),"<table");		
		
		 if(count>1)//只要wwf中的table个数大于1，就可以删除最后一个div。
		 {
		    $('#wwf').find("div:last").remove();//删除最后一个div
		 }
});
//测试控件 
$('#fbt8').click(function(){    	
	     	 console.log($('#wwf').parent().parent().html());    
});	 

	
(function (){	
	
   //表示加载页面就显示一个表。	
   miantable = 1;
   var jsdt = "<div class='child'>"				
			+ "<button id=bta1>追加列表项</button>"
			+ "<button id=btb1>删除列表项</button>"				
			+ "<table id=tableb1 class='table'>"
			+ "<thead><tr><th>字段1 </th><th>字段2</th><th>字段3</th><th>字段4</th><th>字段5</th></tr></thead>"
			+ "<tbody>"
			+ "<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>"
			+ "</tbody>"
			+ "<tfoot><tr><th><strong>合计</strong></th><th></th><th></th><th></th></tr></tfoot>"
			+ "</table>"
			+ "</div>"

			+ "<script type='text/javascript'>"	
			
			+ "$('#tableb1').editableTableWidget();"	
			
			+ "$('#bta1').click(function(){"
			+ "if($('#tableb1').children('tbody').find('tr').size()<12){"
			+ "$('#tableb1').children('tbody').append('<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>');"
			+ "$('#tableb1').unbind();"
			+ "$('#tableb1').editableTableWidget();"
			+ "}"
			+ "});"//这个 js代码必须动态添加到，html中,所有的双引号换成单引号。
			
			+ "$('#btb1').click(function(){"
			+ "if($('#tableb1').children('tbody').find('tr').size()!=1){"
			+ "$('#tableb1').children('tbody').find('tr:last').remove();"
			+ "}"
			+ "});"
			
			+ "<\/script>";

		$('#wwf').append(jsdt);																									
})()
	
</script>
</body>
</html>
  